<template>
  <div class="g-con container">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix card-header"
      >
        <span class="flexsc">{{ t('organizationStructure.Upgrades.t1') }}</span>
        <span v-if="storeLogin?.userInfo?.isAdmin === '1'">
          <el-button
            type="primary"
            @click="upgradeServicesDialog = true"
          >
            {{ t('organizationStructure.Upgrades.b1') }}
          </el-button>
        </span>
      </div>
      <el-divider></el-divider>
      <el-descriptions
        v-if="enterpriseInfo"
        class="margin-top"
        title=""
        :column="1"
      >
        <el-descriptions-item :label="`${t('organizationStructure.Upgrades.d1')}: `">{{ enterpriseInfo.memberGradeName }}</el-descriptions-item>
        <el-descriptions-item :label="`${t('organizationStructure.Upgrades.d2')}: `">{{ dateFormat(enterpriseInfo.memberStartTime, 3) }} - {{ dateFormat(enterpriseInfo.memberEndTime, 3) }}</el-descriptions-item>
        <el-descriptions-item :label="`${t('organizationStructure.Upgrades.d3')}: `"> </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!--  -->
    <UpgradeService
      v-if="upgradeServicesDialog"
      v-model="upgradeServicesDialog"
    />
  </div>
</template>
<script setup>
import { onBeforeMount, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getOrganization } from '@/service/organizationStructure'
import { useI18n } from 'vue-i18n'
import { dateFormat } from '@/utils'
import UpgradeService from './UpgradeService.vue'
import useLogin from '@/stores/login'
const storeLogin = useLogin()

const { t, locale } = useI18n()
watch(locale, () => {
  init()
})
onBeforeMount(() => {
  init()
})

const router = useRouter()
const route = useRoute()

// 企业信息
const enterpriseInfo = ref(null)
const getEnterpriseInfoFn = () => {
  let id = storeLogin.userInfo.enterpriseId
  getOrganization(id).then(({ data }) => {
    enterpriseInfo.value = data
  })
}

const upgradeServicesDialog = ref(route.query.tab === '2')

//
const init = () => {
  getEnterpriseInfoFn()
}
</script>
<style lang="scss" scoped>
.container {
  padding: 18px 20px;
  background: white;
  height: 536px;

  .card-header {
    display: flex;

    span:first-child {
      flex: 9;
    }
  }
}

.item {
  width: 100%;
  height: 100px;
  background: #eaebec;
  padding: 17px 24px;
  margin-bottom: 10px;
}

.descriptions-item {
  width: 100%;
  height: 120px;
  background: #eaebec;
  padding: 17px 24px;
  margin-bottom: 10px;

  :deep(.el-descriptions__cell) {
    background: #eaebec;
    padding-bottom: 4px !important;
  }
}
</style>
